<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>

    <div id="app"></div>

    <script type="text/babel">

        /**
         * React没有模板语法，插值表达式中只支持表达式，不支持语句：for，if
         *
         */

        var users = ['刘伟','莫涛','钟毅'];
        var obj = {left: 100, top: 200};

        ReactDOM.render(
            <div>
                <ul>
                    {
                        /**
                         * 处理数据时，尽量不要改变原有数据，以防止产生不必要的错误
                         * map() 方法会返回一个新的数组
                         */
                        /**
                         * 根据数组中的内容生成一个包含有结构的新数组
                         * 通过数组生成的结构，每一个元素必须包含有一个 key 属性，同时这个 key 属性的值必须是唯一的
                         * 注意：key 值只在数组的上下文中存在意义，所以 key 值在同辈元素中必须是唯一的，在全局中并不需要唯一


                         */
                        users.map( (user, index) => {
                            return <li key={index}>{user}</li>
                        } )
                    }
                </ul>

                <ul>
                    {
                        /*['left', 'top']*/
                        Object.keys(obj).map( key => {
                            return <li key={key}>{key} - {obj[key]}</li>
                        } )
                    }
                </ul>
            </div>,
            document.getElementById('app')
        );
    </script>

</body>
</html>
